//登录成功后显示用户名
let username = localStorage.getItem("username")
if (username != null) {
  console.log(username)
  let usernameStr = username.substring(0, 3)
  let headerLohin = document.querySelector(".headerLohin")
  let login = `
<span>欢迎登录，${usernameStr}</span>
<i>|</i>
<a href="./login.html" id='logout'>注销登录</a>
`
  headerLohin.innerHTML = login
}

//注销
if (username != null) {
  let logout = document.querySelector("#logout")
  logout.addEventListener("click", function () {
    localStorage.removeItem("username")
  })
}

/*
查询用户购物车中的商品 接口
    接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
    接口请求方式：get
    接口参数：
         id  用户id
    使用方
         获取id为1的用户的购物车
         http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1
*/

function goodsCar() {
  let craUrl = `http://jx.xuzhixiang.top/ap/api/cart-list.php`
  let id = localStorage.getItem("id")
  axios.get(craUrl, { params: { id } }).then(function (r) {
    // console.log(r)
    let carArr = r.data.data
    // console.log(carArr)
    let carlist = carArr.map(
      (v) => `
  <li>
  <input onclick = radio(this) id="liAllcheck" type="checkbox" />
  <div class="imgs"><img src="${v.pimg}" alt="${v.pdesc}" /></div>
  <p>${v.pdesc}</p>
  <span id="moy">${"￥" + v.pprice}</span>
  <button onclick = subGoods(${v.pid},${
        v.pnum
      },this)>－</button><span id="pnum">${
        v.pnum
      }</span><button onclick = addGoods(${v.pid},${v.pnum},this)>＋</button>
  <i onclick = Delete(${v.pid})>删除</i>
</li>
  `
    )
    document.querySelector("#carList").innerHTML = carlist.join("")
    let checkBtn = document.querySelector(".carTop input")
    let checkboxAll = document.querySelectorAll("#carList li input")
    console.log(checkboxAll)
    checkboxAll.forEach((v) => {
      if (checkBtn.checked == true) {
        v.checked = true
      }
    })
    //判断购物车是否为空
    let empty = document.querySelector("#empty")
    console.log(empty)
    console.log(r.data.data.length)
    if (r.data.data.length == 0) {
      console.log("11")
      empty.style.display = "block"
    } else {
      empty.style.display = "none"
    }
  })
}
goodsCar()

/*
删除用户购物车中的商品 接口
接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
接口请求方式：get
接口参数：
      uid  用户id
      pid  商品id
*/
function Delete(pid) {
  console.log(pid)
  let uid = localStorage.getItem("id")
  let deleteUrl = `http://jx.xuzhixiang.top/ap/api/cart-delete.php`
  axios.get(deleteUrl, { params: { uid, pid } }).then(function (r) {
    console.log(r)
    goodsCar()
  })
}

/*
更新购物车中商品数量 接口
接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
接口请求方式：get
接口参数：
      uid  用户id
      pid  商品id
      pnum  要添加的商品数量
*/
//加加减减 添加点击事件
function subGoods(pid, pnum) {
  if (pnum == 1) {
    let flag = confirm("是否要删除商品")
    if (flag) {
      //删除商品
      let deleteUrl = `http://jx.xuzhixiang.top/ap/api/cart-delete.php`
      let uid = localStorage.getItem("id")
      let p = axios.get(deleteUrl, { params: { uid, pid, pnum } })
      p.then(function (r) {
        //2.重新渲染liArr ,调用函数
        goodsCar()
      })
    }
    return
  }
  // if (checkBtn.checked == true) {
  //   console.log("11")
  //   isThis.parentNode.firstElementChild.checked == true
  // }
  pnum--
  money()
  let subUrl = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`
  let uid = localStorage.getItem("id")
  axios.get(subUrl, { params: { uid, pid, pnum } }).then(function (r) {
    console.log(r)
    goodsCar()
  })
}

//加加
function addGoods(pid, pnum) {
  pnum++
  money()
  let subUrl = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`
  let uid = localStorage.getItem("id")
  axios.get(subUrl, { params: { uid, pid, pnum } }).then(function (r) {
    console.log(r)
    goodsCar()
  })
}

//结算
let bgc = document.querySelector(".bgc")
let goMny = document.querySelector("#goMny")
let popout = document.querySelector(".popout")
goMny.addEventListener("click", function () {
  popout.style.display = "block"
  bgc.style.display = "block"
})
let btn = document.querySelector(".popout button")
btn.addEventListener("click", function () {
  popout.style.display = "none"
  bgc.style.display = "none"
})

//多选按钮
let checkBtn = document.querySelector(".carTop input")
console.log(checkBtn)
checkBtn.addEventListener("click", function () {
  let checkboxAll = document.querySelectorAll("#carList li input")
  console.log(checkboxAll)
  //checkboxAll 的属性和 全选按钮的属性值一样
  checkboxAll.forEach((v) => {
    v.checked = checkBtn.checked
  })
  money()
})

function money() {
  //计算所有商品的总价
  let carUrl = `http://jx.xuzhixiang.top/ap/api/cart-list.php`
  let id = localStorage.getItem("id")
  axios.get(carUrl, { params: { id } }).then(function (r) {
    // console.log(r.data.data)
    let carArr = r.data.data
    let moneyAll = 0
    carArr.forEach((v) => {
      // console.log(v.pprice)
      moneyAll = moneyAll + parseFloat(v.pprice) * parseFloat(v.pnum)
      // console.log(moneyAll)
      if (checkBtn.checked == true) {
        document.querySelector(".carBottom p span").innerHTML = moneyAll
      } else {
        document.querySelector(".carBottom p span").innerHTML = 0
      }
    })
  })
}
//单选的变化
function radio(isThis) {
  let liAllcheck = document.querySelectorAll("#liAllcheck")
  console.log(liAllcheck)
  //把伪数组转换为数组
  let arr = Array.from(liAllcheck)
  console.log(arr)
  let flag = arr.every((v) => v.checked == true)
  document.querySelector(".carTop input").checked = flag

  console.log(isThis)
  // // 单选价的变化
  let liParentNode = isThis.parentNode
  console.log(liParentNode.children)
  console.log(liParentNode.children[3])
  console.log(liParentNode.children[5])
  let moyPrice = parseFloat(liParentNode.children[3].innerHTML.substring(1))
  console.log(moyPrice)
  let toPrice = moyPrice * parseFloat(liParentNode.children[5].innerHTML)
  console.log(toPrice)
  // num = num + toPrice
  // console.log(num)
  if (isThis.checked == true) {
    document.querySelector(".carBottom p span").innerHTML = toPrice
  } else {
    document.querySelector(".carBottom p span").innerHTML = 0
  }
}

//支付
let lis = document.querySelectorAll(".popout li")
let zfDiv = document.querySelectorAll(".zf")
lis.forEach(function (v, i) {
  v.addEventListener("click", function () {
    console.log(this)
    lis.forEach((v) => v.classList.remove("active"))
    this.className = "active"

    zfDiv.forEach((v) => (v.style.display = "none"))
    zfDiv[i].style.display = "block"
  })
})
